<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .fa {
            font-size: 50px;
            cursor: pointer;
            user-select: none;
        }

        .fa:hover {
            color: darkblue;
        }
    </style>
</head>

<body>


    




    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">

        必知必会 
        
        <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>

        function myFunction(x) {
            x.classList.toggle("fa-thumbs-down");    =>  点击切换图标
        }
    </xmp>



    <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
    <script>
        function myFunction(x) {
            x.classList.toggle("fa-thumbs-down");
        }
    </script>




</body>
</html>